<template>
	<view class="page_content">
<!--    顶部导航-->
		<u-navbar :immersive="true" :is-back="false" :background="background" :border-bottom="false">
			<view class="nav_bar">
				<view class="address u-flex">
					<view>领食惠探店</view>
          <view>商家版</view>
          <view class="nav_bar_icon"></view>
<!--					<view class="u-flex" @click="TuiChu()"><u-icon name="/static/images/tuichu.png" size="34"></u-icon>退出登录</view>-->
				</view>
			</view>
		</u-navbar>

		<view class="top_wrap">
<!--			<image class="topbg" src="/static/images/hometopbg.png" mode="widthFix"></image>-->
      <view class="topbg" mode="widthFix"></view>
<!--      选择商铺弹窗-->
      <shop-index-pop
          :isIcon="isIcon"
          @changeShop="changeShop" ></shop-index-pop>
<!--      历史业绩-->
      <performance :TodayPerformance="TodayPerformance" :shop_id="shop_id"  @changeKPITime="KPITimeFun"></performance>
<!--      <view class="top_info u-flex" @click="AllshopsListshow = true">
        <view class="allshop u-flex">
          <image src="/static/images/Frame.png"></image>
          <view>{{shops_name}}</view>
        </view>
        <view class="allshopright">
          <u-icon name="arrow-right" size="34" color="#333"></u-icon>
        </view>
      </view>-->
<!--			<view class="san_btn_wrap u-flex">
				<view class="san_btn_item" @click="scan()">
					<image src="/static/images/Group 34988.png"></image>
					<view>扫码核销</view>
				</view>
				<view class="san_btn_item" @click="LookDetails('/pages/HeXiaoMingXi/HeXiaoMingXi')">
					<image src="/static/images/Group 34989.png"></image>
					<view>核销明细</view>
				</view>
				<view class="san_btn_item" @click="LookDetails('/pages/ChaKanBiJi/ChaKanBiJi')">
					<image src="/static/images/Group 34990.png"></image>
					<view>查看笔记</view>
				</view>
			</view>-->

		</view>
    <view class="index-content">
      <view class="content-items">
<!--        商品列表-->
        <shop-list :shopsLists="shopsLists" :shop_id="shop_id" @shopList="shopList"></shop-list>
<!--        常用应用-->
        <common-app :userphone="userphone"></common-app>
<!--        <home-orderlist ref="" :orderList="shopsLists"></home-orderlist>-->
      </view>
    </view>
    <view class="index-content-bottom" :style="{height: btnHeight + 'px'}"></view>
    <view class="san_btn_wrap safe-area-inset-bottom">
      <view class="san_btn_item" @click="scan()">
        <u-icon class="san-icon" name="scan" color="#FFFFFF" size="28"></u-icon>
        <text>扫码核销</text>
      </view>
    </view>

    <!--微信小程序提示-->
    <!-- #ifdef MP-WEIXIN -->
    <view class="topTip" v-if="showTip" @click="showTip=false" :style="{top: barHeight + 32 + 'px'}">
      <!--<u-navbar ></u-navbar>-->
      <view class="icons">
        <u-icon name="arrow-up-fill" color="#000000" size="18" top="6"></u-icon>
      </view>
      <view class="tipAdd">
        <text style="margin-right: 20rpx">添加到我的小程序，管理更方便</text>
        <u-icon name="close" color="#fffff" size="18"></u-icon>
      </view>
    </view>
    <!-- #endif -->
		<!-- 扫码错误弹窗 SanMaCuoWuShow-->
		<u-popup v-model="SanMaCuoWuShow" mode="center" width="80%" border-radius="34" :closeable="true">
      <!--重新核销-->
			<view class="cuowuPopup_wrap">
				<image :src="BestImgUrl + '/image.png'"></image>
				<view class="title">{{SMerrTitle}}</view>
				<view class="subtitle">{{SMerrSubTitle}}</view>
				<view class="resbtn" @click="numberVerificationShow = true, SanMaCuoWuShow = false">订单劵码核销</view>
			</view>
		</u-popup>
		<!--订单劵码核销-->
    <u-popup v-model="numberVerificationShow" mode="center" width="80%" border-radius="34" :closeable="true">
      <view class="cuowuPopup_wrap">
        <view class="number_title">订单劵码核销</view>
        <!--输入订单劵码核销-->
        <view class="order_number u-flex">
          <view class="order_title" style="width: 120rpx;margin-right: 20rpx;">订单劵码</view>
          <u-input v-model="verifyCode" type="number" :border="false" placeholder="请输入订单卷码" style="flex: 1;" />
        </view>
        <view class="querenanniu">
          <view @click="numberVerificationFun()" id="numberBtn">确认核销</view>
        </view>
      </view>
		</u-popup>
		<!-- 扫码订单详情弹窗 -->
		<u-popup v-model="SanMaOrderShow" mode="center" width="80%" border-radius="34" :closeable="true">
			<view class="cuowuPopup_wraps">
				
				<view class="goods_info u-flex">
					<view class="goods_img">
						<image :src="SanOrderDetails.shop.logo" mode="aspectFill"></image>
					</view>
					<view class="goods_name">
						<view class="shopname">{{SanOrderDetails.package_name}}</view>
						<view class="info_tags">
							<u-tag :text="SanOrderDetails.package.notes" type="success" size="mini" />
						</view>
					</view>
				</view>
				<view class="order_infos">
					<view class="order_title">订单信息</view>
					<view class="order_info">
						<view>订单号<span>{{SanOrderDetails.order_no}}</span></view>
						<view>下单时间<span>{{SanOrderDetails.create_time}}</span></view>
					</view>
				</view>
				<view class="querenanniu">
					<view @click="TaoCanxiangqing()">套餐详情</view>
					<view @click="QueRenHeXiao()">确认核销</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 核销完成弹窗 -->
		<u-popup v-model="HeXiaoWanChengShow" mode="center" width="80%" border-radius="34" :closeable="true">
			<view class="cuowuPopup_wrap">
				<image :src="BestImgUrl + '/image-956.png'"></image>
				<view class="title">核销完成</view>
				<view class="subtitle">商品订单核销完。</view>
				<view class="resbtn" @click="TaoCanxiangqing()">查看详情</view>
			</view>
		</u-popup>


		
	</view>
</template>

<script>
	import ShopIndexPop from "@/components/shop-list/shop-index-pop.vue";
  import shopList from "@/components/shop-list/shop-list.vue";

  const app = getApp();
	export default {
    components: {ShopIndexPop, shopList},
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				background: {
					backgroundColor: 'transparent',
				},
        barHeight: '', //状态栏高度
        showTip: true, //加入微信小程序提示
        TodayPerformance: {}, //今日业绩
        userphone: {}, //用户信息
				pageSize: 1,
				orderStatus: 2,
				shopsLists: [],
				
				SanMaCuoWuShow: false,
				SMerrTitle: '',
				SMerrSubTitle: '',
				
				SanMaOrderShow: false,
				SanOrderDetails: {
					order_no: '',
					create_time: '',
					shop: {
						logo: '/static/logo.png'
					},
					package_name: "测试套餐，请勿下单",
					package: {
						notes: '过期退·随时腿'
					}
				},
				HeXiaoWanChengShow: false,
        shop_id: '',
        btnHeight: 0, //底部按钮高度
        isIcon: true, // 是否显示图标
        numberVerificationShow: false, //订单劵码核销显示
        verifyCode: '', // 订单劵码
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 1) {
				this.background.backgroundColor = '#FDD375'
			} else {
				this.background.backgroundColor = 'transparent'
			}
		},
		onLoad() {
      console.log('showTip==', this.showTip)
			let that = this
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.reLaunch({
					url: '/pages/logon/logon'
				})
			} else {
        // 判断是否存在店铺ID
        let shopItem = uni.getStorageSync('shopItem')
        if(shopItem){
          that.shop_id = shopItem.id
        }
				that.GetUserInfo()
			  //今日业绩
        that.GetTodayPerformanceFun()
        // 获取店铺列表
        that.GetOrderList()
			}
    //  获取顶部状态高度
      this.barHeight = uni.getSystemInfoSync().statusBarHeight
      //  获取底部按钮高度
      uni.createSelectorQuery().select('.safe-area-inset-bottom').boundingClientRect(rect => {
        this.btnHeight = rect.height
        console.log('高度===', rect.height)
      }).exec();

		},
    onShow() {
      // this.GetTodayPerformanceFun()
    },
		//下拉刷新
		onPullDownRefresh() {
			let that = this
			that.pageSize = 1
			setTimeout(function() {
				that.GetOrderList()
        that.GetTodayPerformanceFun()
				uni.stopPullDownRefresh();
			}, 1500);
		},
		//触底加载
		onReachBottom() {
			let that = this
			setTimeout(function() {
				that.pageSize++;
				that.GetOrderList()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		methods: {

      // 获取历史业绩数据
      GetTodayPerformanceFun(d){
				let that = this
				that.$api.GetTodayPerformance({
          date: d,
          shop_id: that.shop_id
        }).then(res => {
					that.TodayPerformance = res.data.result
          console.log('今日业绩', res.data.result)
        })
			},
      KPITimeFun(date){
        this.GetTodayPerformanceFun(date)
      },

      //获取订单列表数据
			GetOrderList(){
				let that = this
        that.$api.GetgoodsList({
          page: that.pageSize, //分页页码，数字类型
          limit: 10, //每页条数 默认10
          shop_id: that.shop_id, //店铺ID
          status: that.orderStatus //订单状态 默认全部 不传 3已核验（核验明细）， 4查看笔记
        }).then(res => {
          res.data.result.forEach(item => {
            if(item.status === 2){
              item.tab_name = '顾客已购买正在到店路上'
            } else if(item.status === 3){
              item.tab_name = '顾客正常用心创作中请耐心等待'
            } else {
              item.tab_name = '笔记不满意？ | 可联系服务群内业务经理修改笔记'
            }

          })
          console.log('订单列表', res.data.result);
          //console.log('订单列表===', that.pageSize)
          if (that.pageSize !== 1) {
            if (res.data.result.length !== 0) {
              that.shopsLists = that.shopsLists.concat(res.data.result)
            } else {

            }
          } else {
            that.shopsLists = res.data.result
          }
        })

			},
			GetUserInfo() {
				let that = this
        that.$api.GetshopInfo().then(res => {
          console.log('账号信息', res.data.result)
          uni.setStorageSync('userinfo', res.data.result)
        }).catch(err => {

        });
			},

			LookDetails(url) {
				uni.navigateTo({
					url: url
				})
			},
			scan() {
				const that = this
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ["qrCode"],
					success: function(res) {
						//console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
			
						//订单号
						let order_no = res.result
						//然后请求订单详情接口
						that.$u.post('/shop/order/queryOrderByVerifyCode', {
							verify_code: order_no
						}).then(res => {
							console.log('订单详情',res)
							that.SanMaOrderShow = true
							that.SanOrderDetails = res.result
						}).catch(err => {
							that.SanMaCuoWuShow = true
							that.SMerrTitle = '订单信息错误'
							that.SMerrSubTitle = err.data.msg
						});
					},
					fail:function(err){
						console.log('扫码错误',err);
						that.SanMaCuoWuShow = true
						that.SMerrTitle = '扫码错误'
						that.SMerrSubTitle = '请确认二维码是否正确，请重新核对'
					}
				});
			},
			//确认核销
			QueRenHeXiao(){
				let that = this
				let datas = that.SanOrderDetails
				that.$u.post('/shop/order/verify', {
					verify_code: datas.verify_code
				}).then(ress => {
					console.log('扫码核验', ress);
					that.SanMaOrderShow = false
					that.HeXiaoWanChengShow = true
					
					setTimeout(()=>{
						that.pageSize = 1
						that.current = 0
						that.shopsLists = []
						that.orderStatus = 2
						that.GetOrderList();
					},1000)
					
				}).catch(err => {
					console.log('扫码错误',err)
					that.SanMaCuoWuShow = true
					that.SMerrTitle = '订单信息错误'
					that.SMerrSubTitle = err.data.msg
				})
			},
      //订单劵码确认核销
      numberVerificationFun(){
        let that = this
        let datas = that.SanOrderDetails
        that.$u.post('/shop/order/verify', {
          verify_code: that.verifyCode
        }).then(ress => {
          uni.showToast( {
            title: '核销成功',
            icon: 'success',
            duration: 2000
          })
          setTimeout(()=>{
            that.SanMaCuoWuShow = false
            that.pageSize = 1
            that.current = 0
            that.shopsLists = []
            that.orderStatus = 2
            that.GetOrderList();
          },1000)

        }).catch(err => {
          console.log('扫码错误',err)
          that.SanMaCuoWuShow = false
          uni.showToast( {
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          })
        })
      },
			TaoCanxiangqing(){
				let that = this
				let datas = that.SanOrderDetails
				uni.navigateTo({
					url: '/pages/packageDetails/packageDetails?package=' + encodeURIComponent(JSON.stringify(datas))
				})
			},

      changeShop(item){
        let that = this
        that.shop_id = item.id
        that.pageSize = 1
        console.log("商铺id===", item.id)
        //今日业绩
        that.GetTodayPerformanceFun()
        // 获取店铺列表
        that.GetOrderList()
      },
    //  商品列表组件返回数据
      shopList(res){
        console.log("商品列表组件返回数据", res)
        let that = this
        if (res === 2){
          that.orderStatus = res
          that.pageSize = 1
          that.GetOrderList()
        }else if (res === 5){
          that.pageSize = 1
          that.orderStatus = res
          that.GetOrderList()
        }
      },
      // 分享至好友/群聊
      onShareAppMessage(res) {
        const userInfo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
        console.log('用户信息', userInfo)
        return {
          title: '欢迎使用小程序',
          path: 'pages/index/index?shareId=' + userInfo.id,
          imageUrl: '/static/images/share.png'
        }

      },
      // 分享至朋友圈
      onShareTimeline() {},
    },


	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}
	.goods_info {
		background-color: #ffffff;
		padding: 20rpx;
		align-items: flex-start;
		border-radius: 28rpx;
		margin-top: 20rpx;
		.goods_img {
			width: 144rpx;
			height: 144rpx;
	
			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 16rpx;
			}
		}
	
		.goods_name {
			padding-left: 16rpx;
			flex: 1;
	
			.shopname {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				word-break:break-all;
				display:-webkit-box;
				-webkit-line-clamp:1;
				-webkit-box-orient:vertical;
				overflow:hidden;
			}
			
			.info_tags {
				margin-top: 6rpx;
				justify-content: flex-start;
				display: flex;
				align-items: center;
			}
	
			.dizhizu {
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #999999;
				flex: 1;
				margin-top: 18rpx;
				word-break:break-all;
				display:-webkit-box;
				-webkit-line-clamp:1;
				-webkit-box-orient:vertical;
				overflow:hidden;
			}
		}
	}
	.cuowuPopup_wraps {
		background-image: linear-gradient(to top, #ffffff, #FFEDE7);
		padding: 60rpx 60rpx 60rpx 60rpx;
		.querenanniu {
			display: flex;
			align-items: center;
			justify-content: space-between;

			view:nth-child(1){
				flex: 1;
				background-color: #ffffff;
				border-radius: 200rpx;
				color: #333333;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 48rpx auto 0;
				border: 1px solid #D9D9D9;
				margin-right: 10rpx;
			}
			view:nth-child(2){
				flex: 1;
				background-color: #FF4E0D;
				border: 1px solid #FF4E0D;
				border-radius: 200rpx;
				color: #ffffff;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 48rpx auto 0;
				margin-left: 10rpx;
			}

		}

		.order_infos {
			margin-top: 30rpx;
			background-color: #F4F4F4;
			border-radius: 24rpx;
			padding: 30rpx;
			.order_title {
				font-weight: bold;
				font-size: 32rpx;
			}
			.order_info {
				view {
					margin-top: 22rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					span {
						color: #999999;
						margin-left: auto;
					}
				}
			}
		}
	}
	
	.cuowuPopup_wrap {
		text-align: center;
		background-image: linear-gradient(to top, #ffffff, #FFEDE7);
		padding: 60rpx 40rpx;
    .number_title{
      font-size: 32rpx;
    }
    #numberBtn {
      flex: 1;
      background-color: #FF4E0D;
      border: 1px solid #FF4E0D;
      border-radius: 200rpx;
      color: #ffffff;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      margin: 48rpx auto 0;
    }
		image {
			width: 252rpx;
			height: 252rpx;
			margin-bottom: 50rpx;
		}
		.title {
			font-weight: bold;
			font-size: 36rpx;
			margin-bottom: 12rpx;
		}
		.subtitle {
			font-size: 28rpx;
		}
		.resbtn {
			background-color: #FF4E0D;
			border-radius: 200rpx;
			color: #ffffff;
			width: 252rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 48rpx auto 0;
		}
    .order_number{
      margin-top: 30rpx;
      padding: 20rpx;
      background-color: #ffffff;
      border-radius: 24rpx;
    }
	}
	
	.top_wrap {
		position: relative;
		padding: 200rpx 0 0 0;
		overflow: hidden;
    background: linear-gradient( 180deg, #FFEEDD 14%, #FFF9E7 66%, rgba(255,255,255,0) 100%);

		.topbg {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			margin: 0 auto;
			width: 100%;
		}

		.top_info {
			position: relative;
			z-index: 2;
			align-items: center;
			justify-content: inherit;
			//background-color: rgba(255, 255, 255, 0.62);
			padding: 14rpx 24rpx;
			border-radius: 200rpx;
			width: 80%;
			//margin: 0 auto;


		}
  }
  //主题内容css
  .index-content{
    padding: 0 30rpx 30rpx;
    .content-items{
    }

  }
	.nav_bar {
		padding: 30rpx;

		.address {
			font-weight: bold;
			font-size: 44rpx;
			color: #FF8617;
			align-items: center;
      position: relative;
			view:nth-child(2){
        width: 110rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: initial;
				margin-left: 20rpx;
        padding: 4rpx 10rpx;
        color: #FFFFFF;
        background: #FF8617;
        border-radius: 10rpx 10rpx 10rpx 0rpx;
				/deep/ .u-icon {
					margin-right: 10rpx;
				}
			}
      .nav_bar_icon{
        position: absolute;
        right: 90rpx;
        width: 0;
        height: 0;
        border-top: 26rpx solid transparent;
        border-right: 20rpx solid transparent;
        border-left: 10rpx solid transparent;
        border-bottom: 20rpx solid #FF8617;
      }
		}
	}
  //扫码核销css
  .san_btn_wrap {
    width: 100%;
    padding-top: 10rpx;
    position: fixed;
    bottom: 0;
    z-index: 10;
    // background: #FFFFFF;
    .san_btn_item {
      //display: flex;
      padding: 18rpx 0;
      text-align: center;
      align-items: center;
      background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
      border-radius: 16rpx;
      .san-icon {
        padding: 10rpx;
      }
      text {
        font-size: 32rpx;
        color: #FFFFFF;
        margin-top: 12rpx;
        font-weight: 500;
      }
    }
  }
  //微信小程序提示
  .topTip {
    position: fixed;
    right: 68rpx;
    z-index: 999;

    .icons {
      display: flex;
      justify-content: flex-end;
      margin-right: 56rpx;
    }
    .tipAdd {
      border-radius: 10rpx;
      background-color: #000000;
      color: white;
      text-align: center;
      font-size: 26rpx;
      padding: 10rpx 20rpx;
      display: flex;
    }
  }



</style>